<template>
	<view class="pagesbox">
		<u-popup v-model="shouData" mode="bottom" :mask-close-able="false">
			<view class="modelbox">
				<view class="modelbox_haders">
					客户信息
				</view>
				<view class="colse" @click="shouData = false">
					<u-icon name="close"></u-icon>
				</view>
				<view class="modelbox_content_box">
					<mescroll-uni @init="mescrollInit" :top="100" @down="downCallback" :up="upOption" @up="upCallback"
						@emptyclick="emptyClick">
						<view class="item" v-for="(item,index) in customList" :key="index" :down="downOption">
							<view class="list">
								<view class="left ">
									公司名称：
								</view>
								<view class="right">
									<view class="centent gongsititle" >
										{{item.companyName || ''}}
									</view>
								</view>
							</view>
							<view class="list">
								<view class="left">
									电话：
								</view>
								<view class="right">
									<view class="centent ipohe" @click="PhoneCall(item.mobile)">
										{{item.mobile || ''}}
									</view>
								</view>
							</view>

							<view class="list">
								<view class="left">
									绑定时间：
								</view>
								<view class="right">
									<view class="centent">
										{{ $utils.formatTimeRange(item.bindTime) || ''}}
									</view>
								</view>
							</view>

							<view class="list ">
								<view class="left">
									地址：
								</view>
								<view class="right">
									<view class="centent">
										{{item.usePowerAddress || ''}}
									</view>
								</view>
							</view>
						</view>
					</mescroll-uni>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				hot: false,
				shouData: false,
				distance: 0,
				lat: '',
				lng: '',
				area: '', //市名称
				district: '', //区名称
				province: '', //省名称
				keywords: '',
				type: 1,
				upOption: {
					auto: false, //是否在初始化完毕之后自动执行上拉拉刷新的回调; 默认true
					noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认10,
				},
				top: "44rpx",
				pager: {
					currentPage: 1,
					maxResultCount: 10
				},
				// 下拉刷新的常用配置
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				customList: [], //客户信息
			}
		},
		onLoad() {

		},

		methods: {
			start(){
				console.log("开始tart了")
				this.pager.currentPage=1
				this.customList=[]
				this.query()
			},
			query() {
				if (this.type == 1) {
					this.getCustoerList()
				} else if (this.type == 2) {
					this.getshiList()
				} else if (this.type == 3) {
					this.getdistrictList()
				} else if (this.type == 4) {
					this.detailsList()
				}
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.pager.currentPage = page.num; //在第几页
				this.pager.maxResultCount = page.size; //展示多少条数据
				this.query()
			},
			downCallback(page) { // 下拉刷新
				this.mescroll.resetUpScroll();
			},
			PhoneCall(val) {
				if (val) {
					uni.makePhoneCall({
						phoneNumber: `${val}`
					})
				} else {
					// this.$ToastFail('拨号失败，请重试')
				}
			},
			// 获取省标点下客户信息
			getCustoerList() {
				this.$axios.request(this.$api.customerPoolMapUserList, "GET", {
					limit: this.pager.maxResultCount,
					page: this.pager.currentPage,
					province: this.province,
				}).then(res => {
					if (res.data.total >= 0) {
						if (this.pager.currentPage == 1) {
							this.customList = []
						}
						this.customList = this.customList.concat(res.data.list)
					}
					if (res.data.list.length > 0) {
						this.shouData = true
					}
					this.mescroll.endBySize(res.data.list.length, res.data.total)

				})
			},
			// 获取市的标点下客户信息
			getshiList() {
				this.$axios.request(this.$api.customerPoolMapUsershideList, "GET", {
					limit: this.pager.maxResultCount,
					page: this.pager.currentPage,
					area: this.area,
				}).then(res => {
					if (res.data.total >= 0) {
						if (this.pager.currentPage == 1) {
							this.customList = []
						}
						this.customList = this.customList.concat(res.data.list)
					}
					if (res.data.list.length > 0) {
						this.shouData = true
					}
					this.mescroll.endBySize(res.data.list.length, res.data.total)

				})
			},
			// 获取区的标点下客户信息
			getdistrictList() {
				this.$axios.request(this.$api.customerPoolMapUserdistrictList, "GET", {
					limit: this.pager.maxResultCount,
					page: this.pager.currentPage,
					district: this.district,
				}).then(res => {
					if (res.data.total >= 0) {
						if (this.pager.currentPage == 1) {
							this.customList = []
						}
						this.customList = this.customList.concat(res.data.list)
					}
					if (res.data.list.length > 0) {
						this.shouData = true
					}
					this.mescroll.endBySize(res.data.list.length, res.data.total)
				})
			},
			detailsList() {
				console.log("进入想清了")
				this.$axios.request(this.$api.custerManpHot, "GET", {
					lat: this.lat,
					lng: this.lng,
					limit: 10,
					page: this.pager.currentPage,
					distance: this.distance
				}).then(res => {
					var userInfo_level= uni.getStorageSync("userInfo_level")
					if(userInfo_level!=0){
						res.data.total=20
					}
					if (res.data.total >= 0) {
						if (this.pager.currentPage == 1) {
							this.customList = []
						}
						this.customList = this.customList.concat(res.data.list)
					}
					if (res.data.list.length > 0) {
						this.shouData = true
					}
					this.mescroll.endBySize(res.data.list.length, res.data.total)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pagesbox {
		width: 750rpx;
		box-sizing: border-box;
		background-color: #fff;
	}

	.modelbox {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: 80vh;
		background-color: #fff;

	}

	.item {
		overflow: hidden;
		width: 100%;
		background-color: #fff;
		// margin: 30rpx 0rpx;
		padding: 0rpx 32rpx;
		box-sizing: border-box;
	}
	.titleBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* width: 750rpx; */
		height: 42rpx;
		margin-top: 16rpx;
		margin: 0rpx 32rpx;
	}

	.txt {
		height: 40rpx;
		font-size: 32rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		line-height: 40rpx;
		color: #333333;
	}

	.tag {
		/* width: 128rpx; */
		height: 40rpx;
		margin-left: 10rpx;
		font-size: 20rpx;
		font-family: "PingFang SC";
		font-weight: 400;
		line-height: 40rpx;
		color: #F5F5F5;
		/* text-align: center; */
		padding: 0 15rpx;
	}

	.biaoHao {
		height: 28rpx;
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 400;
		line-height: 20rpx;
		color: #BBBBBB;
		margin: 15rpx 0 18rpx;
		margin-left: 32rpx;
	}

	.list {
		display: flex;
		border-bottom: 2px solid #f9f9f9;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 20rpx 0;
		// height: 60rpx;
		height: auto;


	}

	.list:first-child {
		border-top: 2px solid #f9f9f9;
	}

	.left {
		width: 188rpx;
		height: 33rpx;
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		line-height: 33rpx;
		color: #333333;
	}

	.right {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 590rpx;
		// height: 33rpx;
	}

	.centent {
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		color: #666;
		height: 100%;
	}

	.modelbox_haders {
		position: fixed;
		left: 50%;
		top: 0;
		transform: translate(-50%,0);
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		line-height: 120rpx;
		height: 120rpx;
		font-size: 32rpx;
		font-family: "PingFang SC";
		font-weight: 700;
		background-color: #fff;
		// background-color: #3975EA;
	}

	.modelbox_content {
		width: 100%;
		height: calc(100% - 120rpx);
		overflow-y: auto;
	}

	.modelbox_content_box {
		width: 100%;
		height: 100%;
		overflow-y: auto;
	}

	.col {
		/* flex-direction: column; */
		/* align-items: flex-start; */
		// height: 90rpx;
		padding: 6rpx 0;
		box-sizing: border-box;
		border-bottom: 3rpx solid #dadada;
	}

	.colse {
		position: absolute;
		top: -3rpx;
		right: 0rpx;
		width: 80rpx;
		height: 80rpx;
		display: flex;
		z-index: 999;
		align-items: center;
		justify-content: center;
		// background-color: #3975EA;
	}

	.ipohe {
		text-decoration: underline;
		color: #3975EA;
	}
	.gongsititle {
		font-weight: 1000;
		font-size: 30rpx;
		color:black;
	}
</style>